<template>
  <div>
    <!-- 新增用户按钮 模糊查询用户 -->
    <div>
      <div v-permission="'selectUserPage'" class="keyWord">
        姓名：
        <el-input style="width: 250px" v-model="pageReq.keyWord.userMc" placeholder="请输入名称"></el-input>
        手机号：
        <el-input style="width: 250px" v-model="pageReq.keyWord.userSjh" placeholder="请输入手机号"></el-input>
        角色：
        <el-select v-model="pageReq.keyWord.roleBh" placeholder="请选择角色">
          <el-option v-for="item in roles" :key="item.roleBh" :label="item.roleMc" :value="item.roleBh">
          </el-option>
        </el-select>
        学院：
        <el-select v-model="pageReq.keyWord.userXy" placeholder="请选择学院">
          <el-option v-for="item in xy" :key="item.keyname" :label="item.keyname" :value="item.keyvalue">
          </el-option>
        </el-select>
      </div>
      <div v-permission="'selectUserPage'" class="keyWord">
        <div>
          状态：
          <el-select v-model="pageReq.keyWord.status" placeholder="请选择当前状态">
            <el-option v-for="item in xy" :key="item.keyname" :label="item.keyname" :value="item.keyvalue">
            </el-option>
          </el-select>
        </div>
        <div>
          <el-button type="primary" icon="el-icon-search" @click="showUser()">搜索</el-button>
          <el-button type="primary" icon="el-icon-search" @click="reset()">重置</el-button>
        </div>
      </div>

    </div>
    <div style="padding: 0 80rem 5px 0">
      <!--      <el-button type="success" icon="el-icon-plus" @click="addUserDialogVisible = true"-->
      <!--                 v-permission="'insertUser'">新增用户</el-button>-->
    </div>

    <el-table :data="users" border class="etable">
      <el-table-column align="center" fixed prop="userCode" label="学号/职工号">
      </el-table-column>
      <el-table-column align="center" prop="userMc" label="姓名">
      </el-table-column>
      <el-table-column align="center" prop="userSjh" label="手机号">
      </el-table-column>
      <el-table-column align="center" prop="roleMc" label="角色名称">
      </el-table-column>
      <el-table-column align="center" prop="userXymc" label="学院">
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间">
      </el-table-column>
      <el-table-column align="center" prop="loginTime" label="登录时间">
      </el-table-column>
      <el-table-column align="center" prop="status" label="当前状态">
        <template slot-scope="scope">
          <el-tag effect="dark" type="primary" v-if="scope.row.status === '0'">已申请</el-tag>
          <el-tag effect="dark" type="success" v-if="scope.row.status === '1'">已审批</el-tag>
          <el-tag effect="dark" type="danger" v-if="scope.row.status === '-1'">已停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="240px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status == '1'" v-permission="'updateUser'" @click="toUpUser(scope.row)"
                     type="primary" size="mini">修改
          </el-button>
          <!--          v-permission="'approvalUser'"-->
          <el-button v-if="scope.row.status == '0'" @click="toapprovalUser(scope.row)" type="success" size="mini">审批
          </el-button>
          <el-button size="mini" type="info" @click="toUserDetail(scope.row)">详情</el-button>
          <el-popconfirm v-permission="'deleteUser'" style="margin-left: 10px;" title="确定停用该用户吗？"
                         @confirm="delUser(scope.row.userBh)">
            <el-button v-if="scope.row.status == '1'" slot="reference" size="mini" type="danger">停用</el-button>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="pageReq.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageReq.pageSize"
                   layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <el-dialog v-permission="'insertUser'" title="用户注册" :visible.sync="addUserDialogVisible" width="50%">
      <el-form :model="newUser" :rules="rules" ref="newUser" :inline="true" class="demo-form-inline"
               label-position="right" label-width="100px">
        <el-form-item label="学号/职工号" prop="userCode">
          <el-input v-model="newUser.userCode" autocomplete="off" placeholder="请输入学号/职工号"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="userMc">
          <el-input v-model="newUser.userMc" autocomplete="off" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="userMm">
          <el-input type="password" v-model="newUser.userMm" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="userSjh">
          <el-input type="text" v-model="newUser.userSjh" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="userYx">
          <el-input type="email" v-model="newUser.userYx" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="学院" prop="userXy">
          <el-select ref="newUserXy" v-model="newUser.userXy" placeholder="请选择学院">
            <el-option v-for="item in xy" :key="item.keyname" :label="item.keyname" :value="item.keyvalue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="userYx">
          <el-input type="email" v-model="newUser.userBj" placeholder="请输入班级"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="userBm">
          <el-select ref="newUserBm" v-model="newUser.userBm" placeholder="请选择部门">
            <el-option v-for="item in bm" :key="item.keyname" :label="item.keyname" :value="item.keyvalue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="roleBh">
          <el-select v-model="newUser.roleBh" placeholder="请选择角色">
            <el-option v-for="item in roles" :key="item.roleBh" :label="item.roleMc" :value="item.roleBh">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addUser()">确 定</el-button>
        <el-button type="warning" @click="resetnewUserForm()">重 置</el-button>
        <el-button @click="addUserDialogVisible = false">取 消</el-button>
       </span>
    </el-dialog>

    <el-dialog v-permission="'updateUser'" title="修改用户" :visible.sync="upUserDialogVisible" width="50%">
      <el-form :model="upUser" :rules="rules" ref="upUser" :inline="true" class="demo-form-inline"
               label-position="right" label-width="100px">
        <el-form-item label="学号/职工号" prop="userMc">
          <el-input v-model="upUser.userCode" autocomplete="off" placeholder="请输入学号/职工号"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="userMc">
          <el-input v-model="upUser.userMc" autocomplete="off" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="userMm">
          <el-input type="password" v-model="upUser.userMm" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="userSjh">
          <el-input type="text" v-model="upUser.userSjh" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="userYx">
          <el-input type="email" v-model="upUser.userYx" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="学院" prop="userXy">
          <el-select v-model="upUser.userXy" placeholder="请选择学院">
            <el-option v-for="item in xy" :key="item.keyname" :label="item.keyname" :value="item.keyvalue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="userYx">
          <el-input type="email" v-model="upUser.userBj" placeholder="请输入班级"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="userBm">
          <el-select v-model="upUser.userBm" placeholder="请选择部门">
            <el-option v-for="item in bm" :key="item.keyname" :label="item.keyname" :value="item.keyvalue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="roleBh">
          <el-select v-model="upUser.roleBh" placeholder="请选择角色">
            <el-option v-for="item in roles" :key="item.roleBh" :label="item.roleMc" :value="item.roleBh">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="upUserFun()">确 定</el-button>
          <el-button type="primary" @click="resetupUserForm()">重 置</el-button>
        <el-button @click="upUserDialogVisible = false">取 消</el-button>
       </span>
    </el-dialog>

    <el-dialog v-permission="'updateUser'" :title="title" :visible.sync="UserDetailDialogVisible" width="50%">
      <el-descriptions column="2" border>
        <el-descriptions-item label="学号/职工号">{{ upUser.userCode }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ upUser.userMc }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ upUser.userSjh }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ upUser.userYx }}</el-descriptions-item>
        <el-descriptions-item label="学院">{{ upUser.userXymc }}</el-descriptions-item>
        <el-descriptions-item label="班级">{{ upUser.userBj }}</el-descriptions-item>
        <el-descriptions-item label="所属部门">{{ upUser.userBmmc }}</el-descriptions-item>
        <el-descriptions-item label="角色">{{ upUser.roleMc }}</el-descriptions-item>
        <el-descriptions-item label="当前状态">
          <el-tag effect="dark" type="primary" v-if="upUser.status === '0'">已申请</el-tag>
          <el-tag effect="dark" type="success" v-if="upUser.status === '1'">已审批</el-tag>
          <el-tag effect="dark" type="danger" v-if="upUser.status === '-1'">已停用</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <span style="color: red;" v-if="sfsp">请仔细核对信息后进行审批，审批完成后用户即可登录。</span><br/>
      <span style="color: red;" v-if="sfsp">点击不予审批，将不会再显示该用户的信息，请谨慎操作!</span>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" v-if="!sfsp" @click="upUserDialogVisible = false">确 定</el-button>
          <el-button type="success" v-if="sfsp" @click="approvalUser('1')">审 批</el-button>
          <el-button type="danger" v-if="sfsp" @click="resetupUserForm('-2')">不予审批</el-button>
        <el-button v-if="sfsp" @click="upUserDialogVisible = false">取 消</el-button>
       </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "../axios/axios.js"
import {selectRole} from "@/api/role"
import {selectUserPage, insertUser, updateUser} from "@/api/user"

export default {
  data() {
    return {
      title: "",
      sfsp: false,
      users: [],
      status: [{keyname: "已申请", keyvalue: "0"}, {keyname: "已审批", keyvalue: "1"}, {
        keyname: "已停用",
        keyvalue: "-1"
      }],
      pageReq: {
        currentPage: 1,
        pageSize: 10,
        keyWord: {
          userMc: "",
          userSjh: "",
          roleBh: "",
          userXy: "",
          status: ""
        }
      },
      total: 0,
      addUserDialogVisible: false,
      newUser: {
        userMc: "",
        userMm: "",
        userSjh: "",
        userYx: "",
        userBm: "",
        userBmmc: "",
        userXy: "",
        userXymc: "",
        roleBh: "",
        roleMc: "",
        userBj: "",
        userCode: ""
      },
      upUserDialogVisible: false,
      upUser: {
        userMc: "",
        userMm: "",
        userSjh: "",
        userYx: "",
        userBm: "",
        userXy: "",
        roleBh: "",
        userBj: "",
        userCode: "",
        status: ""
      },
      bm: [],
      xy: [],
      roles: [],
      rules: {
        userCode: [
          {required: true, message: '请输入学号/职工号', trigger: 'change'},
          {required: true, min: 12, max: 12, message: '请输入学号/职工号', trigger: 'change'}
        ],
        userMc: [
          {required: true, message: '请输入姓名', trigger: 'change'}
        ],
        userMm: [
          {required: true, message: '请填写密码', trigger: 'change'},
          {required: true, min: 6, message: '请输入6位以上密码', trigger: 'change'}
        ],
        userSjh: [
          {required: true, message: '请输入手机号', trigger: 'change'},
          {required: true, pattern: /^1[3456789]\d{9}$/, message: '请输入正确格式手机号', trigger: 'change'}
        ],
        userXy: [
          {required: true, message: '请选择学院', trigger: 'change'}
        ],
        roleBh: [
          {required: true, message: '请选择角色', trigger: 'change'}
        ],
      },
      UserDetailDialogVisible: false
    }
  },
  created() {
    this.showUser()
    this.showRole()
    this.queryKey("xy,bm")
  },
  methods: {
    reset() {
      this.pageReq.keyWord = {}
    },
    queryKey(keyCodes) {
      axios({
        method: 'GET',
        url: '/keyValue/queryKey?keyCodes=' + keyCodes
      }).then(res => {
        if (res.code == "200") {
          this.xy = res.data.xy
          res.data.bm.forEach(bm => {
            if (bm.keyname == '全部') {
              bm.keyname = "无"
            }
          })
          this.bm = res.data.bm
        }

      })
    },
    showRole() {
      selectRole({
        keyWord: {
          rolemc: ""
        }
      }).then(res => {
        if (res.code == "200") {
          this.roles = res.data
        }
      })
    },
    showUser() {
      selectUserPage(this.pageReq).then(res => {
        if (res.code == "200") {
          this.users = res.data.objects
          this.total = res.data.size
        }
      })
    },
    handleSizeChange(size) {
      //修改当前每页的数据行数
      this.pageReq.pageSize = size;
      //数据重新分页
      this.showUser();
    },
    //调整当前的页码
    handleCurrentChange(pageNumber) {
      //修改当前的页码
      this.pageReq.currentPage = pageNumber;
      //数据重新分页
      this.showUser()
    },
    resetnewUserForm() {
      this.$refs.newUser.resetFields();
    },
    resetupUserForm() {
      this.$refs.upUser.resetFields();
    },
    addUser() {
      this.$refs['newUser'].validate((valid) => {
        if (valid) {
          insertUser(this.newUser).then(res => {
            if (res.code == "200") {
              this.$message({
                message: res.msg,
                type: "success"
              })
              this.newUser = {}
              this.addUserDialogVisible = false;
              this.showUser()
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    toUpUser(user) {
      this.upUser = {...user}
      this.showRole()
      this.upUserDialogVisible = true
    },
    toapprovalUser(user) {
      this.upUser = {...user}
      this.showRole()
      this.UserDetailDialogVisible = true
      this.title = "用户申请审批"
      this.sfsp = true
    },
    approvalUser(sftg) {
      this.upUser.status = sftg
      updateUser(this.upUser).then(res => {
        if (res.code == "200") {
          this.$message.success("操作成功!")
          this.upUser = {}
          this.UserDetailDialogVisible = false;
          this.showUser()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    toUserDetail(user) {
      this.upUser = {...user}
      this.showRole()
      this.UserDetailDialogVisible = true
      this.title = "用户详情"
      this.sfsp = false
    },
    upUserFun() {
      this.$refs['upUser'].validate((valid) => {
        if (valid) {
          updateUser(this.upUser).then(res => {
            if (res.code == "200") {
              this.$message({
                message: res.msg,
                type: "success"
              })
              this.upUser = {}
              this.upUserDialogVisible = false;
              this.showUser()
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    delUser(userBh) {
      axios({
        method: "POST",
        url: "/qxglUser/deleteUser/" + userBh
      }).then(res => {
        if (res.code == "200") {
          this.$message({
            message: res.msg,
            type: "success"
          })
          this.showUser()
        } else {
          this.$message.error(res.msg)
        }
      })
    }

  }

}
</script>

<style>
.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  background: #FFF;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  width: 26%;
}

.keyWord {
  width: 90rem;
  position: relative;
  right: -5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 20px 0;
}

.etable {
  width: 90%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
</style>
